import * as d3 from "d3";
import Color from "element-plus/es/components/color-picker/src/color";
import emitter from "../utils/eventbus";
import { Point, TextPoint } from "./common";
import { drawCurve } from "./line";
// 绘制自定义坐标轴
/**
 *
 * @param $ dom
 * @param startPoint 开始节点
 * @param len 长度
 * @param interval
 * @param k
 */
export function drawXAxis($: any, startPoint: Point, len: number, interval: number, k: number): any {
  let points: Point[] = [];
  let startX = startPoint.x;
  let startY = startPoint.y;
  for (var i = 0; i <= len; i++) {
    if (i % interval === 0) {
      let a = new Point(startX + i, startY);
      let b = new Point(startX + i, startY - 2);
      let c = new Point(startX + i, startY);
      points.push(a);
      points.push(b);
      points.push(c);
    } else {
      let a = new Point(startX + i, startY);
      let b = new Point(startX + i, startY - 1);
      let c = new Point(startX + i, startY);
      points.push(a);
      points.push(b);
      points.push(c);
    }
  }
  console.log(points);
  drawCurve($, points, "curveLinear");
}
/**
 * 绘制等分比例尺
 * @param $ 
 * @param startPoint 
 * @param len 
 * @param space 
 * @param tickSize 
 * @param k 
 */
export function drawPropXAxis($: any, startPoint: Point, len: number, space: number, tickSize: number = 2, k: number = 1) {
  let id: string = $.attr("id");
  let points: Point[] = [];
  let textPoints: TextPoint[] = [];
  let startX = startPoint.x;
  let startY = startPoint.y;
  for (var i = 0; i <= len; i += space) {
    let a = new Point(startX + i, startY);
    let b = new Point(startX + i, startY - tickSize);
    textPoints.push(new TextPoint(startX + i, startY - tickSize - 1, ((startX + i) * k).toString()))
    let c = new Point(startX + i, startY);
    points.push(a);
    points.push(b);
    points.push(c);
  }
  console.log(points);
  // 此处已经挂了一个监听器
  drawCurve($, points, "curveLinear");
  var texts = $.selectAll(".text")
    .data(textPoints)
    .enter()
    .append("text")
    .attr("class", "label")
    .attr('x', function (d) {
      return d.x
    })
    .attr('y', function (d) {
      return d.y
    })
    .attr('font-size', 12)
    .attr("text-anchor", "middle")
    .text(function (d) {
      return d.text;
    });
  // 监听事件
  emitter.on(id, (transform: any) => {
    texts.attr("transform", transform).attr("font-size", 12 / transform.k);
  });
}

/**
 * 
 * @param $ 
 * @param startPoint 
 * @param len 
 * @param space 
 * @param tickSize 
 * @param k 
 */
export function drawPropTextXAxis($: any, startPoint: Point, len: number, space: number, tickSize: number = 2, k: number = 1, color :string = '#000000',title: TextPoint) {
  let id: string = $.attr("id");
  let points: Point[] = [];
  let textPoints: TextPoint[] = [];
  let startX = startPoint.x;
  let startY = startPoint.y;
  for (var i = 0; i <= len; i += space) {
    let a = new Point(startX + i, startY);
    let b = new Point(startX + i, startY - tickSize);
    textPoints.push(new TextPoint(startX + i, startY - tickSize - 1, ((i) * k).toString()))
    let c = new Point(startX + i, startY);
    points.push(a);
    points.push(b);
    points.push(c);
  }
  // 此处已经挂了一个监听器
  let x = drawCurve($, points, "curveLinear",`${color}`);
  var texts = $.selectAll(".text")
    .data(textPoints)
    .enter()
    .append("text")
    .attr("class", "label")
    .attr('x', function (d) {
      return d.x
    })
    .attr('y', function (d) {
      return d.y
    })
    .attr('font-size', 12)
    .attr("text-anchor", "middle")
    .attr("fill", `${color}`)
    .text(function (d) {
      return d.text;
    });
  if (title) {
    //获取线段总长度
    var totalLength = x.node().getTotalLength();
    // 获取线段中心点的坐标
    var centerPoint = x.node().getPointAtLength(totalLength / 2);
    var titleDraw = $.append("text")
      // .attr("x", title.x)
      // .attr("y", title.y)
      .attr("x", centerPoint.x-(title.text.length/2)*15)
      .attr("y", centerPoint.y-25)
      .attr("fill", `${title.color}`)
      .attr("font-size", `${title.size}px`)
      .text(`${title.text}`)
  }
  // 监听事件
  emitter.on(id, (transform: any) => {
    texts.attr("transform", transform).attr("font-size", 12 / transform.k);
    titleDraw.attr("transform", transform);
  });
}
